<template>
  <div>
    {{tableSource.length}}
    <table class='table table-striped table-bordered'></table>
  </div>
</template>
<script>
  import $ from 'jquery'
  import 'bootstrap'
  import 'datatables.net'
  import 'datatables.net-bs'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'datatables.net-bs/css/dataTables.bootstrap.css'

  //  ###*
  //  # @memberOf com.vueframework
  //  # @class table组件
  //  # @constructor
  //  # @extends com.vueframework
  //  # @param {Object} param 组件配置（下面的参数为配置项,配置会写入属性,详细的配置说明请看属性部分）
  //  # @param {object} param.settings 组件配置
  //  # @param {boolean} param.settings.searching 是否显示搜索框 默认true
  //  # @param {boolean} param.settings.processing 是否显示LOADING 默认true
  //  # @param {boolean} param.settings.lengthChange 是否显示条数选择 默认false
  //  # @param {boolean} param.settings.ordering 是否可排序 默认true
  //  # @param {boolean} param.settings.paging 是否分页 默认true
  //  # @param {array} param.settings.aaSorting 自定义列默认排序方式 默认不排序 例：[[ 0, 'desc' ],[ 1, 'asc' ],null]
  //  # @param {array} param.settings.columns 列对象集合 [column...]
  //  # @param {object} column 列对象
  //  # @param {object} column.title 列名
  //  # @param {object} column.data 列对应模型的name
  //  # @param {object} column.bSortable 是否可排序，默认true
  //  # @param {function} column.render 渲染回调，参数data[行数据], type[类型], full[行全数据], meta[属性信息]
  //  ###
  export default{
    data () {
      if (this.tableData) {
        return {
          'tableSource': this.tableData
        }
      } else {
        return {

        }
      }
    },
    props: ['options', 'tableData'],
    computed: {
    },
    mounted () {
      var _settings = {
        columns: [],
        ajax: '',
        data: this.tableSource ? this.tableSource : null,
        searching: true,
        processing: true,
        lengthChange: false,
        ordering: true,
        paging: true,
        info: true,
        serverSide: true,
        language: {
          'sProcessing': '处理中...',
          'sLengthMenu': '显示 _MENU_ 项结果',
          'sZeroRecords': '没有匹配结果',
          'sInfo': '显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项',
          'sInfoEmpty': '显示第 0 至 0 项结果，共 0 项',
          'sInfoFiltered': '(由 _MAX_ 项结果过滤)',
          'sInfoPostFix': '',
          'sSearch': '搜索:',
          'sUrl': '',
          'sEmptyTable': '表中数据为空',
          'sLoadingRecords': '载入中...',
          'sInfoThousands': ',',
          'oPaginate': {
            'sFirst': '首页',
            'sPrevious': '上页',
            'sNext': '下页',
            'sLast': '末页'
          },
          'oAria': {
            'sSortAscending': ': 以升序排列此列',
            'sSortDescending': ': 以降序排列此列'
          }
        },
        aaSorting: []
      }
      $.extend(_settings, this.options)

      this.datatable = $(this.$el).children('table:first').DataTable(_settings)
    },
    methods: {
      setData (data) {
        var _table = this.datatable
        this.clear()
        data.forEach(function (val, key) {
          _table.rows.add([val])
        })
        this.refresh()
      },
      clear () {
        this.datatable.clear()
      },
      refresh () {
        this.datatable.rows().invalidate().draw()
      }
    },
    watch: {
      tableSource (data) {
        this.setData(data)
      }
    }
  }
</script>

<style scoped>

</style>
